<!-- 项目实施计划 -->
<template>
  <el-descriptions :column="2" size="large" class="td-item">
    <el-descriptions-item label-class-name="right-align" label='项目名称'>
      <span class="text--info subtext">{{projectInfo.projectName}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label='评审项目阶段'>
      <span class="text--info subtext">{{processName(projectInfo.stageStatus)}}</span>
    </el-descriptions-item>
  </el-descriptions>
  <el-table
    :data="projectPlans"
    border
    :header-cell-style="{
    background: '#eef1f6',
    color: '#606266'
    }"
  >
    <template #empty>
      <el-empty :image-size="40" description="暂无数据"></el-empty>
    </template>
    <el-table-column type="index" label="序号" />
    <el-table-column prop="time" label="起止时间"></el-table-column>
    <el-table-column prop="content" label="研究内容"></el-table-column>
    <el-table-column prop="goal" label="预期目标"></el-table-column>
    <el-table-column prop="isDone" label="是否完成">
      <template #default="{ row }">
        {{ row.isDone === "1" ? "是" : "否" }}
      </template>
    </el-table-column>
    <el-table-column prop="doneTime" label="完成时间"></el-table-column>
    <el-table-column prop="doneDes" label="完成情况"></el-table-column>
    <el-table-column label="进度">
      <template #default="{ row }">
        {{ row.progress && row.progress + "%" }}
      </template>
    </el-table-column>

    <el-table-column label="操作" width="220">
      <template #default="{ row, $index }">
        <el-button type="text" @click="edit(row, $index)">查看</el-button>
        <el-button type="text" @click="openProcess(row, $index)">实施过程记录</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    title="实施过程记录"
    v-model="model.processVisible"
    destroy-on-close
    width="60vw"
  >
    <el-table
      :data="model.targetProcess?.planProcessList"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="comSituation" label="完成情况"></el-table-column>
      <el-table-column label="附件">
        <template #default="{ row }">
          <el-link
            v-for="(item, index) in row?.processAttachmentArr"
            :key="index"
            @click="handlePreview(item)"
            >{{ item.fileName }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="createUserName" label="提交人"></el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog
    title="项目实施情况"
    v-model="model.dialogFormVisible"
    destroy-on-close
    width="45vw"
  >
    <el-form
      :model="model.formData"
      disabled
      ref="formRef"
      @submit.prevent
      :rules="formRules"
      label-width="100px"
    >
      <el-row>
        <el-col>
          <el-form-item label="起止时间">
            {{ model.formData?.time }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="研究内容">
            {{ model.formData?.content }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="预期目标">
            {{ model.formData?.goal }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="是否完成">
            <span v-if='model.formData?.isDone==1'>是</span>
            <span v-else>否</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="完成时间">
            {{model.formData?.doneTime}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="进度">
            <template v-if='model.formData?.progress'>
              <span>{{model.formData?.progress}}%</span>
            </template>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="完成情况">
            {{model.formData?.doneDes}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
         <el-form-item label="附件">
            <!-- <el-upload
              name="uploadFile"
              multiple
              :accept="acceptTypes"
              :action="uploadComUrl"
              :headers="uploadHeaders"
              :on-success="handlelSuccess"
              :on-remove="handlelRemove"
              :on-error="handleError"
              :file-list="model.defaultFileList"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePreview"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持上传doc、docx、xls、xlsx、pdf、ppt、pptx、png、jpg、jpeg等格式文件,文件大小不得大于10M。
                </div>
              </template>
            </el-upload> -->

            <div v-if="model.defaultFileList?.length" class="file-wrap">
              <p
                class="text--info download-link subtext"
                v-for="(obj, index) in model.defaultFileList"
                :key="index"
                @click.prevent="handlePreview(obj)"
              >
                <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
              </p>
            </div>
            <div class="text--info subtext file-wrap" v-else> - </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch,reactive } from "vue";
import { cloneDeep } from "lodash-es";
import {processStatus}  from  "/@/utils/globalConstant";
const props = defineProps({
  projectInfo: {
    type: Object
  },
});
const info = ref({});
const projectPlans = ref([])
const model = reactive({
  targetProcess: null,
  processVisible: false,
  index: 0,
  dialogFormVisible: false,
  defaultFileList: [],
  dones: [
    { key: "1", label: "是" },
    { key: "0", label: "否" }
  ],
  formData: {
    time: "",
    content: "",
    goal: "",
    isDone: "",
    doneTime: "",
    doneDes: "",
    attachment: [],
    progress: "",
    planProcessList: []
  }
});

watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
    if(newvalue?.projectPlans?.length){
      projectPlans.value = newvalue?.projectPlans.map(el => {
        return {
          time: el.startTime.split(" ")[0] + "至" + el.endTime.split(" ")[0],
          timeObj: [el.startTime.split(" ")[0], el.endTime.split(" ")[0]],
          content: el.researchContent,
          goal: el.goal,
          isDone: el.done,
          doneDes: el.doneDes,
          doneTime: el.doneTime,
          attachment: (el.attachment && JSON.parse(el.attachment)) || [],
          planProcessList: el.planProcessList,
          progress: el.progress
        };
      });
    }else{
      projectPlans.value =  [];
    }
  },
  { immediate: true },
);

const openProcess = item => {
  console.log(item,"itemitemitem")
  model.targetProcess = item;
  model.processVisible = true;
};

const edit = (row, index) => {
  model.index = index;
  model.dialogFormVisible = true;
  model.formData = cloneDeep(row);
  model.defaultFileList = model.formData.attachment;
};

const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};

const processName = (stageStatus) => {
  return processStatus.get(+stageStatus)
}

onMounted(() => {
  info.value = props.projectInfo;
});
</script>

<style lang="scss" scoped>
  .file-wrap{
    display: inline-block;
    vertical-align: top
  }
</style>
